<template>
  <div>
    <el-table :data="advicelist" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column label="日期" width="160" sortable prop="date">
      </el-table-column>
      <el-table-column label="建议" width="460" prop="advice">
      </el-table-column>
      <el-table-column label="答复" width="460" prop="reply">
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >答复</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="信息" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form">
        <el-form-item label="建议" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6 }"
            placeholder=""
            v-model="form.advice"
            maxlength="160"
            show-word-limit
            :disabled="true"
            resize="none"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="答复" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6 }"
            placeholder="请输入内容"
            v-model="form.reply"
            maxlength="160"
            show-word-limit
            resize="none"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitchange">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
// import { v4 as uuidv4 } from "uuid";
export default {
  name: "AdviceList",
  mounted() {
    this.all();
  },
  data() {
    return {
      deleteid: "",
      dialogFormVisible: false,
      form: {
        advice: "",
        reply: "",
      },
      formLabelWidth: "60px",
      advicelist: [
        {
          date: "2016-05-02",
          advice:
            "上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区",
          reply:
            "上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区",
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      // console.log(index, row);
      this.form = row;
    },
    handleDelete(index, row) {
      // console.log(index, row);
      this.deleteid = row.id;
      this.del();
    },
    exitchange() {
      this.dialogFormVisible = false;
      this.all();
    },
    change() {
      if (this.form.reply == "") {
        alert("请输入答复");
      } else {
        this.dialogFormVisible = false;
        this.update();
      }
    },
    all() {
      //查找info表全部数据
      axios
        .get("http://127.0.0.1/advicelist_yang/all")
        .then((res) => {
          // console.log(res.data);
          this.advicelist = res.data;
          // console.log(this.advicelist);
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },
    del() {
      //删除操作
      axios
        .get("http://127.0.0.1/advicelist_yang/del", {
          params: {
            id: this.deleteid,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.all();
        })
        .catch((err) => {
          console.log("操作失败" + err);
        });
    },
    update() {
      //修改操作
      axios
        .get("http://127.0.0.1/advicelist_yang/update", {
          params: {
            id: this.form.id,
            student: this.form.student,
            date: this.form.date,
            advice: this.form.advice,
            reply: this.form.reply.trim(),
            replyer: "管理员",
          },
        })
        .then((res) => {
          console.log(res);
          this.all();
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },
  },
};
</script>

<style>
</style>